<template>
  <div class="index" id="showMap">
    <div class="header">
      <div class="title">
        俯瞰 OVERLOOK
        <el-button type="primary" @click="gotoHome" class="toHomeButton"
          >退出登录</el-button
        >
      </div>
    </div>
    <div class="line"></div>
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="this.$route.path"
          router="true"
        >
          <el-menu-item index="/checkSystem">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">系统几何级校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/checkphoto">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">控制点几何校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/toGCPEditor">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-setting"></i>
              <span slot="title">控制点标注采集</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/index">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">图像重建与分解</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/showMap">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">数据查看与呈现</span>
            </div>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div class="amap-page-container" id="container" v-loading="aloading">
          <!-- <el-amap
            vid="amapDemo"
            :zoom="zoom"
            :center="center"
            class="amap-demo"
          >
          </el-amap> -->
          <div
            id="mapDiv"
            style="position: absolute; width: 1000px; height: 900px"
          ></div>
        </div>
        <div class="details">
          <div style="display: flex">
            <el-input
              v-model="longitude"
              placeholder="请输入经度"
              size="small"
              style="width: 100px"
            ></el-input>
            <el-input
              v-model="latitude"
              placeholder="请输入纬度"
              size="small"
              style="width: 100px; margin-left: 5px"
            ></el-input>
            <el-button size="small" @click="jump()" style="margin-left: 5px"
              >跳转</el-button
            >
          </div>
          <div style="margin-top: 5px; padding: 0px; display: flex">
            <div class="fileBox">
              上传瓦片图片集合
              <input
                id="img"
                type="file"
                name="image"
                multiple="multiple"
                style="margin-top: 0px; margin-left: 20px"
              />
            </div>
            <el-button
              @click="uploadFile()"
              size="small"
              style="margin-left: 5px；margin-top:5px"
              >上传</el-button
            >
          </div>
          <div style="margin-top: 5px; padding: 0px; display: flex">
            <div class="fileBox">
              上传正射影像图片
              <input
                id="img2"
                type="file"
                name="image"
                multiple="multiple"
                style="margin-top: 0px; margin-left: 20px"
              />
            </div>
            <el-button
              @click="uploadFile2()"
              size="small"
              style="margin-left: 5px；margin-top:5px"
              >上传</el-button
            >
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style src="../assets/css/Index.css" scoped >
</style>

<style scoped>
.fileBox {
  position: relative;
  overflow: hidden;
  /* background-color: rgb(64,158,255); */
  background-color: #fff;
  /* color: white; */
  color: rgb(96, 98, 102);
  width: 205px;
  height: 30px;
  line-height: 32px;
  border: 2px solid rgb(220, 203, 230);
  border-width: 0.5px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 5px;
}

.fileBox input {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  filter: alpha(opacity=0);
  opacity: 0;
}
.amap-page-container {
  width: 100%;
  height: 100%;
  min-height: 600px;
}
.details {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: fixed;
  top: 7rem;
  background-color: white;
  width: auto;
  min-width: 18rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
  z-index: 9999;
}
</style>>

<script>
import axios from "axios";
export default {
  data() {
    return {
      zoom: 15,
      center: [121.5273285, 31.21515044],
      input: "",
      address: "",
      longitude: "",
      latitude: "",
      map: null,
      dialogVisible: false,
      addr: "",
      tilerLayer: null,
      aloading: false,
    };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.dialogVisible = true;
    },
    jump() {
      console.log(this.longitude);
      console.log(this.latitude);
      // var map;
      // var zoom = 18;
      // var url =
      //   "http://t0.tianditu.gov.cn/img_w/wmts?" +
      //   "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
      //   "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b1abd1a22614e54255aec15ca2e3d0f9";

      // var tilerLayer0 = new T.TileLayer(url, { minZoom: 1, maxZoom: 18 });
      // var url2 = this.address;
      // // var tilerLayer1 = new T.TileLayer(url2, { minZoom: 5, maxZoom: 22 });

      // var config = {
      //   layers: [tilerLayer0],
      //   // projection: "EPSG:4326",
      //   projection: "EPSG:900913",
      // };
      // map = new T.Map("mapDiv", config); // 初始化地图对象
      this.map.centerAndZoom(
        // new T.LngLat(108.75134786087972, 34.02842102278464),
        new T.LngLat(this.longitude, this.latitude),
        18
      );
    },
    upload() {
      console.log(this.addr);
      var addr = this.addr;
      var tilerLayer = new AMap.TileLayer({
        zIndex: 5,
        zooms: [5, 22],
        getTileUrl: function (x, y, z) {
          return addr + "/" + z + "/" + x + "/" + y + ".png";
        },
      });
      var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 18,
        zooms: [5, 22],
        expandZoomRange: true, //扩大高德地图缩放级别到20
        // layers: [layer_std, imgLayer_google, layer_dl],
        layers: [new AMap.TileLayer.Satellite(), tilerLayer],
        center: [this.longitude, this.latitude],
        // center: [-91.99, -46.84216],
      });
    },
    async uploadFile() {
      var uuid;
      var img = document.getElementById("img").files;
      // var txt = document.getElementById("txt").files;
      console.log(img);
      // console.log(txt);

      var images = new FormData();

      //add images
      for (var i = 0; i < img.length; i++) {
        images.append("images", img[i]);
      }

      console.log(images);
      this.aloading = true;
      await axios
        .post("http://10.132.20.144:8001/showMap", images)
        .then((response) => {
          //成功时服务器返回 response 数据
          console.log(response.data);
          this.address = response.data.address;
          this.latitude = response.data.latitude;
          this.longitude = response.data.longitude;
          console.log(this.address);
          console.log(this.latitude);
          console.log(this.longitude);
          this.aloading = false;
        })
        .catch(function (error) {
          console.log(error);
        });

      var url2 = this.address;
      var tilerLayer1 = new T.TileLayer(url2, { minZoom: 5, maxZoom: 22 });
      this.map.addLayer(tilerLayer1);
      var lng = new T.LngLat(112.62634962936087, 35.12004363142687);
      this.map.panTo(lng);
    },
    async uploadFile2() {
      var img = document.getElementById("img2").files;
      // var txt = document.getElementById("txt").files;
      console.log(img);
      // console.log(txt);

      var images = new FormData();

      //add images
      for (var i = 0; i < img.length; i++) {
        images.append("images", img[i]);
      }

      console.log(images);
      this.aloading = true;
      await axios
        .post("http://10.132.20.144:8001/showMap2", images)
        .then((response) => {
          //成功时服务器返回 response 数据
          console.log(response.data);
          this.address = response.data.address;
          this.latitude = response.data.latitude;
          this.longitude = response.data.longitude;
          console.log(this.address);
          console.log(this.latitude);
          console.log(this.longitude);
          this.aloading = false;
        })
        .catch(function (error) {
          console.log(error);
        });

      var url2 = this.address;
      var tilerLayer1 = new T.TileLayer(url2, { minZoom: 5, maxZoom: 22 });
      this.map.addLayer(tilerLayer1);
      var lng = new T.LngLat(112.62634962936087, 35.12004363142687);
      this.map.panTo(lng);
    },
  },
  mounted() {
    this.address = this.$route.query.address;
    this.latitude = this.$route.query.latitude;
    this.longitude = this.$route.query.longitude;
    if (this.latitude == undefined) {
      this.latitude = 39.9;
      this.longitude = 116.3;

      var zoom = 18;
      var url =
        "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b1abd1a22614e54255aec15ca2e3d0f9";

      this.tilerLayer = new T.TileLayer(url, { minZoom: 1, maxZoom: 18 });

      var config = {
        layers: [this.tilerLayer],
        // projection: "EPSG:4326",
        projection: "EPSG:900913",
      };
      this.map = new T.Map("mapDiv", config); // 初始化地图对象
      this.map.centerAndZoom(
        // new T.LngLat(108.75134786087972, 34.02842102278464),
        new T.LngLat(this.longitude, this.latitude),
        zoom
      );
    } else {
      console.log(this.address);

      var zoom = 18;
      var url =
        "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b1abd1a22614e54255aec15ca2e3d0f9";

      var tilerLayer0 = new T.TileLayer(url, { minZoom: 1, maxZoom: 18 });
      var url2 = this.address;
      var tilerLayer1 = new T.TileLayer(url2, { minZoom: 5, maxZoom: 22 });

      var config = {
        layers: [tilerLayer0, tilerLayer1],
        // projection: "EPSG:4326",
        projection: "EPSG:900913",
      };
      this.map = new T.Map("mapDiv", config); // 初始化地图对象
      this.map.centerAndZoom(
        // new T.LngLat(108.75134786087972, 34.02842102278464),
        new T.LngLat(this.longitude, this.latitude),
        zoom
      );
    }
  },
};
</script>